<template>
  <j-modal :title="title" :width="1000" :visible="visible" :confirmLoading="confirmLoading" switchFullscreen
           @ok="handleOk" @cancel="handleCancel" cancelText="关闭">
    <template slot="footer">
      <a-button @click="close">取消</a-button>
      <a-button v-if="!disableSubmit" :loading="confirmLoading" type="primary" @click="handleOk()">提交</a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="订单产品折合件数">
              {{ model.totalConvertNumber }}
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="拼车车型" >
              <a-select v-model="model.optimumModelCode" allowClear placeholder="拼车车型" @change="handleOptimum">
                <a-select-option :value="item.modelCode" :name="item.modelName"
                                 v-for="(item,index) in model.modelDetailedVos" :key="index">{{ item.modelName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <!-- 活动明细 -->
      <a-divider orientation="left">收货地址</a-divider>
      <div style="margin-bottom: 10px"></div>
      <a-table ref="table" size="small" bordered rowKey="id" :columns="columns"
               :dataSource="model.headCarpoolingRespVoList"
               :pagination="ipagination" :loading="loading" class="Table" :scroll="{x:'max-content', y: 400 }">
      <span slot="quantity" slot-scope="text, record,index">
        <a-select v-model="record.addressCode" allowClear placeholder="请选择性别" @change="handleAddress"
                  style="width: 350px;">
                <a-select-option :value="item.addressCode" :index="index"
                                 v-for="(item,indexs) in model.addressRespVoList" :key="indexs">
                  {{ item.addressDetailed }}
                </a-select-option>
        </a-select>
      </span>
      </a-table>
    </a-spin>
    <proChose ref="prochoose" @okbro="okbropro" :name="name"></proChose>
  </j-modal>
</template>

<script>
import {
  getAction,
  postAction,
  httpAction
} from '@/api/manage'
import proChose from '@comp/cn-components/ProChose'
import {
  pick
} from 'lodash'


export default {
  name: 'TpmActSpecialModal',
  components: {
    proChose
  },
  data() {
    return {
      title: '操作',
      visible: false,
      ipagination: false,
      columns: [
        {
          title: '订单编号',
          align: 'center',
          width: 100,
          dataIndex: 'orderCode',
        },
        {
          title: '拼车单号',
          align: 'center',
          width: 100,
          dataIndex: 'carpoolingCode',
          ellipsis: true,
        },
        {
          title: '客户编号',
          align: 'center',
          width: 100,
          dataIndex: 'customerCode',
          ellipsis: true,
        },
        {
          title: '客户名称',
          align: 'center',
          width: 250,
          dataIndex: 'customerName',
        },
        {
          title: '收货地址',
          align: 'center',
          width: 360,
          dataIndex: 'addressDetailed',
          scopedSlots: {
            customRender: 'quantity'
          },
        },
      ],
      labelCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 8
        }
      },
      wrapperCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 16
        }
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      model: {},
      url: {
        add: window._CONFIG['domianDmsURL'] + '/order/dmsOrderHead/saveOrderCarpooling',
        edit: window._CONFIG['domianDmsURL'] + '/order/dmsOrderHead/findOrderInfo'
      }
    }
  },
  created() {
  },

  methods: {
    handleOptimum(e, t) {
      console.log(t)
      this.$set(this.model, 'optimumMatchModel', t.data.attrs.name)
    },
    handleAddress(e, t) {
      console.log(t)
      let { index } = t.data.attrs
      let key = t.data.key
      let address = this.model.addressRespVoList[key]
      this.model.headCarpoolingRespVoList[index] = Object.assign({}, this.model.headCarpoolingRespVoList[index], address)
    },
    add() {
      this.edit()
    },
    edit(record) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, Object.keys(this.model)))
      })
    },
    close() {
      this.$emit('close')
      this.dataSource = []
      this.orderTaxAmount = '', // 结算信息
        this.taxableAmount = '',
        this.orderQuantity = '',
        this.visible = false
    },
    handleOk() {
      const that = this
      that.confirmLoading = true
      let formData = {
        optimumModelCode: this.model.optimumModelCode,
        optimumMatchModel: this.model.optimumMatchModel,
        itemVoList: this.model.headCarpoolingRespVoList
      }
      httpAction(this.url.add, formData, 'post').then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.$emit('ok')
          that.close()
        } else {
          that.$message.warning(res.message)
        }
      }).finally(() => {
        that.confirmLoading = false
      })
    },
    handleCancel() {
      this.close()
    },
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-modal-body {
  padding-top: 0 !important;
}

.ant-calendar-picker,
.ant-input-number {
  width: 100% !important;
}
</style>
